
<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <el-tabs v-model="activeTab" class="login-tabs">
      <el-tab-pane label="学生" name="student">
        <form @submit.prevent="() => handleLogin(1)">
          <div class="form-group">
            <label for="student-username">学号</label>
            <div class="input-with-icon">
              <el-icon class="icon"><User /></el-icon>
              <input
                id="student-username"
                v-model="formData.student.username"
                type="text"
                placeholder="请输入学号"
                required
              />
            </div>
          </div>
          <div class="form-group">
            <label for="student-password">密码</label>
            <div class="input-with-icon">
              <el-icon class="icon"><Lock /></el-icon>
              <input
                id="student-password"
                v-model="formData.student.password"
                :type="showPassword.student ? 'text' : 'password'"
                placeholder="请输入密码"
                required
              />
              <button 
                type="button" 
                class="toggle-password" 
                @click="showPassword.student = !showPassword.student"
              >
                <el-icon v-if="showPassword.student"><View /></el-icon>
                <el-icon v-else><Hide /></el-icon>
              </button>
            </div>
          </div>
          <button type="submit" class="login-button">学生登录</button>
        </form>
      </el-tab-pane>
      <el-tab-pane label="教师" name="teacher">
        <form @submit.prevent="() => handleLogin(2)">
          <div class="form-group">
            <label for="teacher-username">工号</label>
            <div class="input-with-icon">
              <el-icon class="icon"><User /></el-icon>
              <input
                id="teacher-username"
                v-model="formData.teacher.username"
                type="text"
                placeholder="请输入工号"
                required
              />
            </div>
          </div>
          <div class="form-group">
            <label for="teacher-password">密码</label>
            <div class="input-with-icon">
              <el-icon class="icon"><Lock /></el-icon>
              <input
                id="teacher-password"
                v-model="formData.teacher.password"
                :type="showPassword.teacher ? 'text' : 'password'"
                placeholder="请输入密码"
                required
              />
              <button 
                type="button" 
                class="toggle-password" 
                @click="showPassword.teacher = !showPassword.teacher"
              >
                <el-icon v-if="showPassword.teacher"><View /></el-icon>
                <el-icon v-else><Hide /></el-icon>
              </button>
            </div>
          </div>
          <button type="submit" class="login-button">教师登录</button>
        </form>
      </el-tab-pane>
      <el-tab-pane label="管理员" name="admin">
        <form @submit.prevent="() => handleLogin(3)">
          <div class="form-group">
            <label for="admin-username">管理员账号</label>
            <div class="input-with-icon">
              <el-icon class="icon"><User /></el-icon>
              <input
                id="admin-username"
                v-model="formData.admin.username"
                type="text"
                placeholder="请输入管理员账号"
                required
              />
            </div>
          </div>
          <div class="form-group">
            <label for="admin-password">密码</label>
            <div class="input-with-icon">
              <el-icon class="icon"><Lock /></el-icon>
              <input
                id="admin-password"
                v-model="formData.admin.password"
                :type="showPassword.admin ? 'text' : 'password'"
                placeholder="请输入密码"
                required
              />
              <button 
                type="button" 
                class="toggle-password" 
                @click="showPassword.admin = !showPassword.admin"
              >
                <el-icon v-if="showPassword.admin"><View /></el-icon>
                <el-icon v-else><Hide /></el-icon>
              </button>
            </div>
          </div>
          <button type="submit" class="login-button">管理员登录</button>
        </form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { User, Lock, View, Hide } from '@element-plus/icons-vue'

const router = useRouter()
const activeTab = ref('student')

const formData = {
  student: reactive({
    username: '',
    password: '',
    roleId: '1'
  }),
  teacher: reactive({
    username: '',
    password: '',
    roleId: '2'
  }),
  admin: reactive({
    username: '',
    password: '',
    roleId: '3'
  })
}

const showPassword = {
  student: ref(false),
  teacher: ref(false),
  admin: ref(false)
}

const handleLogin = (roleId: number) => {
  const currentForm = formData[activeTab.value]
  console.log(`角色${roleId}登录信息:`, currentForm)

  router.push('/')
}
</script>

<style scoped>
/* 原有样式保持不变 */
.login-container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: rgb(0 0 0);
  position: relative;
  z-index: 1;
}

.login-container::before {
  content: '';
  background-image: url('@/assets/img/school-bg.png');
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.8;
}

.login-tabs {
  margin-top: 1rem;
}

.login-tabs .el-tabs__item {
  font-size: 1rem;
  padding: 0 1.5rem;
}

.login-tabs .el-tabs__nav-wrap::after {
  height: 1px;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon .icon {
  position: absolute;
  left: 10px;
  color: #666;
}

.input-with-icon .el-icon {
  width: 1em;
  height: 1em;
  font-size: 1.2rem;
}

.form-group input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #3aa876;
}
</style>
